<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note List</title>
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .note-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 卡片布局 */
            gap: 20px; /* 卡片之间的间距 */
            padding: 20px;
            margin-bottom: 60px; /* 为底部导航栏留出空间 */
        }
        .note-item {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .note-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .note-item .note-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        .note-item .note-header span {
            font-weight: 600;
        }
        .note-item .note-content {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 15px;
            font-weight: 500;
            overflow: hidden; /* 防止内容溢出 */
            text-overflow: ellipsis; /* 使用省略号 */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 限制显示的行数 */
            -webkit-box-orient: vertical;
        }
        .note-item .note-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: auto; /* 将标签固定在卡片底部 */
        }
        .note-item .note-tags span {
            background-color: #007bff;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .note-item .note-tags span:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Web 端顶部导航栏样式 */
        .web-top-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #ffffff; /* 白色背景 */
            border-bottom: 1px solid #e0e0e0; /* 底部边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }
        .web-top-nav .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .web-top-nav .logo img {
            height: 24px;
            margin-right: 8px; /* 图标与文字间距 */
        }
        .web-top-nav .search {
            display: flex;
            align-items: center;
            gap: 5px; /* 减少搜索按钮与输入框之间的间距 */
        }
        .web-top-nav .search input {
            width: 0;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            font-size: 14px;
            transition: width 0.3s ease;
            opacity: 0;
        }
        .web-top-nav .search input.active {
            width: 200px; /* 展开后的宽度 */
            opacity: 1;
        }
        .web-top-nav .search button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #333;
        }
        .web-top-nav .search button:hover {
            color: #007bff;
        }
        .web-top-nav .links {
            display: flex;
            align-items: center;
            gap: 15px; /* 减少链接之间的间距 */
            margin-left: 10px; /* 调整与搜索框的间距 */
        }
        .web-top-nav .links a {
            display: flex;
            align-items: center;
            gap: 5px; /* 图标与文字之间的间距 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .web-top-nav .links a:hover {
            color: #007bff; /* 悬停效果 */
        }
        .web-top-nav .links a .icon {
            font-size: 16px; /* 图标大小 */
        }

        /* App 端顶部导航栏样式 */
        .app-top-nav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #007bff;
            color: white;
            text-align: center;
            padding: 10px 0;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .app-top-nav a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 5px 10px;
        }
        .app-top-nav a.active {
            border-bottom: 2px solid white;
        }
        .app-top-nav a:hover {
            opacity: 0.8;
        }

        /* 美化底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f8f8f8;
            border-top: 1px solid #ddd;
            padding: 5px 0;
        }
        .bottom-nav a {
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .bottom-nav a.active {
            color: #007bff;
        }
        .bottom-nav a .icon {
            display: block;
            font-size: 20px;
            margin-bottom: 5px;
        }

        /* Web 端样式 */
        @media (min-width: 768px) {
            .app-top-nav {
                display: none;
            }
            .bottom-nav {
                display: none; /* 隐藏底部导航栏 */
            }
        }

        /* App 端样式 */
        @media (max-width: 767px) {
            .web-top-nav {
                display: none;
            }
            .note-list {
                margin-top: 50px;
                margin-bottom: 60px; /* 为底部导航栏留出空间 */
            }
        }
    </style>
</head>
<body>
    <!-- Web 端顶部导航栏 -->
    <div id="header"></div>

    <!-- App 端顶部导航栏 -->
    <div class="app-top-nav">
        <a href="local-notes.html">本地</a>
        <a href="online-notes.html">在线</a>
        <a href="search.html" class="active">搜索</a>
    </div>

    <!-- 笔记列表 -->
    <div class="note-list">
        <!-- Notes will be dynamically rendered here -->
    </div>

    <!-- 引入底部导航栏 -->
    <div>
        <!-- Include bottom-nav.html content here -->
        <div class="bottom-nav">
            <a href="note-list.html" class="active">
                <span class="icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="messages.html">
                <span class="icon">💬</span>
                <span>消息</span>
            </a>
            <a href="login.html">
                <span class="icon">👤</span>
                <span>个人</span>
            </a>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const searchButton = document.querySelector('.web-top-nav .search button');
            const searchInput = document.querySelector('.web-top-nav .search input');

            searchButton.addEventListener('click', () => {
                if (!searchInput.classList.contains('active')) {
                    searchInput.classList.add('active');
                    searchInput.focus();
                } else {
                    console.log('Searching:', searchInput.value);
                }
            });

            document.addEventListener('click', (e) => {
                if (!e.target.closest('.search')) {
                    searchInput.classList.remove('active');
                }
            });
        });

        const notes = [
            {
            id: crypto.randomUUID(),
            title: "Work Deadlines",
            content: "🚀 This is the first note. It contains some important information about work and deadlines.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["work", "important", "urgent"]
            },
            {
            id: crypto.randomUUID(),
            title: "Daily Tasks",
            content: "📅 This is the second note. It is a personal reminder for daily tasks and events.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["personal", "reminder", "tasks"]
            },
            {
            id: crypto.randomUUID(),
            title: "Study Topics",
            content: "📚 This is the third note. It includes study topics, a to-do list, and project ideas.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["study", "todo", "projects"]
            },
            {
            id: crypto.randomUUID(),
            title: "App Development Ideas",
            content: "💡 This is the fourth note. It contains brainstorming ideas for a new app development project.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["ideas", "development", "app"]
            },
            {
            id: crypto.randomUUID(),
            title: "Grocery List",
            content: "🍎 This is the fifth note. It is a grocery list for the week, including fruits, vegetables, and snacks.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["grocery", "shopping", "list"]
            },
            {
            id: crypto.randomUUID(),
            title: "Travel Plans",
            content: "✈️ This is the sixth note. It contains travel plans, including flight details, hotel bookings, and itinerary.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["travel", "plans", "itinerary"]
            },
            {
            id: crypto.randomUUID(),
            title: "Book Summary",
            content: "📖 This is the seventh note. It includes a summary of the book I am currently reading and key takeaways.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["reading", "summary", "books"]
            },
            {
            id: crypto.randomUUID(),
            title: "Fitness Plan",
            content: "🏋️ This is the eighth note. It is a fitness plan with daily workout routines and diet recommendations.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["fitness", "workout", "diet"]
            },
            {
            id: crypto.randomUUID(),
            title: "Creative Projects",
            content: "🎨 This is the ninth note. It contains a list of creative projects, including painting, sketching, and DIY crafts.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["creative", "projects", "art"]
            },
            {
            id: crypto.randomUUID(),
            title: "Meeting Summary",
            content: "📝 This is the tenth note. It is a detailed meeting summary with action items and deadlines for the team.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["meeting", "summary", "action-items"]
            },
            {
            id: crypto.randomUUID(),
            title: "Reflective Journal",
            content: "🌟 This is an eleventh note. It contains a long reflective journal entry about personal growth and achievements over the past year. It discusses challenges faced, lessons learned, and goals for the future. The note is meant to inspire and motivate.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["reflection", "growth", "motivation"]
            },
            {
            id: crypto.randomUUID(),
            title: "Home Office Guide",
            content: "📜 This is a twelfth note. It is a comprehensive guide on how to set up a home office. It includes tips on choosing the right furniture, organizing cables, and creating a productive work environment. The note is detailed and spans multiple paragraphs.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["guide", "home-office", "productivity"]
            }
        ];

        function renderNotes() {
            const noteList = document.querySelector(".note-list");
            noteList.innerHTML = ""; // Clear existing notes

            notes.forEach(note => {
                const noteItem = document.createElement("div");
                noteItem.classList.add("note-item");

                noteItem.innerHTML = `
                    <h3 class="note-title">${note.title}</h3>
                    <div class="note-header">
                        <span><strong>Created:</strong> ${note.createdAt}</span>
                        <span><strong>Updated:</strong> ${note.updatedAt}</span>
                    </div>
                    <div class="note-content">${note.content}</div>
                    <div class="note-tags">
                        ${note.tags.map(tag => `<span>${tag}</span>`).join("")}
                    </div>
                `;

                noteList.appendChild(noteItem);
            });
        }

        document.addEventListener("DOMContentLoaded", renderNotes);
    </script>
    <script>
        // Load shared header
        document.addEventListener("DOMContentLoaded", () => {
            fetch("header.html")
                .then(response => response.text())
                .then(html => {
                    document.getElementById("header").innerHTML = html;
                });
        });

        // Redirect to local-notes.html by default
        document.addEventListener("DOMContentLoaded", () => {
            window.location.href = "local-notes.html";
        });

        // Add click event for messages link
        document.addEventListener("DOMContentLoaded", () => {
            const messagesLink = document.querySelector(".bottom-nav a:nth-child(2)");

            if (messagesLink) {
                messagesLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    window.location.href = "messages.html";
                });
            }
        });
    </script>
</body>
</html>
